<template>
    <div class="content-container">
        <Title :icon="'line-chart-fill'" :title="'SEM推广'"></Title>
        <div class="h-520px ml-16px mr-16px">
            <div class="table-container">
                <el-table :data="state.tableData" class="w-full">
                    <el-table-column label="" prop="name" align="center" />
                    <el-table-column label="浏览量(PV)" prop="pv" align="center" />
                    <el-table-column label="访客数(UV)" prop="uv" align="center" />
                    <el-table-column label="IP数" prop="ip" align="center" />
                </el-table>
            </div>
            <div class="flex mt-16px relative">
                <Tabs v-model="activeIndex" @update:model-value="handleTabClick" active-color="#ffffff">
                    <TabItem label="IP数" path="" :index="0">
                        <IPEchart />
                    </TabItem>
                    <TabItem label="访客数(UV)" path="" :index="1">
                        访客数(UV)
                    </TabItem>
                    <TabItem label="浏览量(PV)" path="" :index="2">
                        浏览量(PV)
                    </TabItem>
                </Tabs>
                <div class="flex items-center text-12px absolute right-0 top-10px">
                    对比：<el-checkbox v-model="state.yesterday" label="前一日" size="small" /><el-checkbox v-model="state.lastWeek" label="上周同期" size="small" />
                </div>
            </div>
        </div>
        
    </div>
</template>

<script setup lang="ts">
import Tabs from '@/components/Tab/First.vue'
import TabItem from '@/components/Tab/Item.vue'
import IPEchart from './IPEchart.vue'

const state = reactive({
    tableData:[
        {
            name:'今日',
            pv:100,
            uv:100,
            ip:100
        },
        {
            name:'昨日',
            pv:100,
            uv:100,
            ip:100
        },
        {
            name:'预计今日',
            pv:100,
            uv:100,
            ip:100
        }
    ],
    yesterday:'',
    lastWeek:'',
})

const activeIndex = ref(0)

function handleTabClick(val:any) {
    const { index } = val
    activeIndex.value = index
}
</script>

<style scoped>

</style>